<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="base_top.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>筛选器</title>
    <link rel="stylesheet" href="<%=basePath%>css/goods/goodFilter_style.css">
    <link rel="stylesheet" href="<%=basePath%>css/goods/kkpager_blue.css">
	<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/goods_filter/kkpager.min.js"></script>
	
  </head>
  
  
<body>
<div style="width:960px;margin:10px auto; clear:both; text-align:center;  ">
</div>
<div class="selectNumberScreen">

	<div id="selectList" class="screenBox screenBackground">
	
	  <dl class="listIndex" attr="rtype">
		<dt>艺术分类：</dt>
		  <dd style="height:65px" class="typeList">
			  <a href="javascript:void(0)" attrval="">全部</a> 
			  <s:iterator value="#request['categories']" id="category">
			  <a href="javascript:void(0)" attrval='<s:property value="#request.category.gcId"/>'><s:property value="#request.category.categoryName"/></a>
			  </s:iterator>
		  </dd>
		</dl>
		
		<s:iterator value="#request.goodAttrs" id="attr">
			<s:if test="%{#request.attr.attrName == '材质'}">
				<dl class="listIndex" attr="texture" id='<s:property value="#request.attr.attrId"/>'>
			</s:if>
			<s:elseif test="%{#request.attr.attrName == '题材'}">
				<dl class="listIndex" attr="theme" id='<s:property value="#request.attr.attrId"/>'>
			</s:elseif>
			<s:elseif test="%{#request.attr.attrName == '技法'}">
				<dl class="listIndex" attr="technique" id='<s:property value="#request.attr.attrId"/>'>
			</s:elseif>
			<s:elseif test="%{#request.attr.attrName == '形制'}">
				<dl class="listIndex" attr="shape" id='<s:property value="#request.attr.attrId"/>'>
			</s:elseif>
			<s:elseif test="%{#request.attr.attrName == '作品风格'}">
				<dl class="listIndex" attr="style" id='<s:property value="#request.attr.attrId"/>'>
			</s:elseif>
			<s:elseif test="%{#request.attr.attrName == '字体'}">
				<dl class="listIndex" attr="font" id='<s:property value="#request.attr.attrId"/>'>
			</s:elseif>
				<dt><s:property value="#request.attr.attrName"/> ：</dt>
				<dd style="height:65px" class="attrList">
			<a href="javascript:void(0)" values2="" values1="" attrval=''>全部</a>
			<s:iterator value="#request.attr.attrValues" id="attrValue">
				<a href="javascript:void(0)" values2="" values1="" attrval='<s:property value="#request.attrValue"/>'><s:property value="#request.attrValue"/> </a>
			</s:iterator>
			</dd>
			</dl>
		</s:iterator>
		
		
		
	  <dl class="listIndex" attr="price">
		<dt>价  格：</dt>
		  <dd style="height:50px" class="attrList">
			  <a href="javascript:void(0)" values2="499" values1="1" attrval="">全部</a> 
			  <a href="javascript:void(0)" values2="499" values1="1" attrval="1-499">1-499</a> 
			  <a href="javascript:void(0)" values2="999" values1="500" attrval="500-999">500-999</a>
			  <a href="javascript:void(0)" values2="1999" values1="1000" attrval="1000-1999">1000-1999</a>
			  <a href="javascript:void(0)" values2="2999" values1="2000" attrval="2000-2999">2000-2999</a>
			  <a href="javascript:void(0)" values2="4999" values1="3000" attrval="3000-4999">3000-4999</a>
			  <a href="javascript:void(0)" values2="0" values1="5000" attrval="5000-999999999">5000以上</a>
		 </dd>
	 </dl>
		
	  <dl class=" listIndex" attr="local">
		<dt>所在地：</dt>
		  <dd style="height:120px" class="attrList">
			  <a href="javascript:void(0)" values2="" values1="" attrval="">全部</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="北京">北京</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="天津">天津</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="河北">河北</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="内蒙古">内蒙古</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="山西">山西</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="上海">上海</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="安徽">安徽</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="江苏">江苏</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="浙江">浙江</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="山东">山东</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="福建">福建</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="江西">江西</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="广西">广西</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="海南">海南</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="河南">河南</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="湖北">湖北</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="湖南">湖南</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="黑龙江">黑龙江</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="吉林">吉林</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="辽宁">辽宁</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="重庆">重庆</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="四川">四川</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="云南">云南</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="贵州">贵州</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="西藏">西藏</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="山西">山西</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="甘肃">甘肃</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="宁夏">宁夏</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="青海">青海</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="大理">大理</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="新疆">新疆</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="香港">香港</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="澳门">澳门</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="台湾">台湾</a>
			  <a href="javascript:void(0)" values2="" values1="" attrval="国外">国外</a>
		  </dd>
		</dl>
		
	</div>
	
	<div class="hasBeenSelected">
		<dl>
			<dt>您已选择：</dt>
			<dd style="display:none" class="clearDd">
				<div class="clearList"></div>
				<div style="display:none;" class="eliminateCriteria">清除筛选条件</div>
			</dd>
		</dl>
	</div>
	
	<div style="margin:10px auto; text-align:center;  ">
	
		<div id="wrap">
		    <div class="art_list">
		    <s:iterator value="#request['goods']" id="good" >
		        <div class="list_div" id="list_div">
		            <div class="listDiv_img"><a href='goods/goodsDetail?id=<s:property value="#request.good.goodsNum"/>' target="_blank"/><img src='<s:property value="#request.good.mainpic"/>'></a></div>
		            <div class="listDiv_text">
		                <div class="listText_title"><a href="#"><font><s:property value="#request.good.userName"/></font></a></div>
		                <div class="listText_pri"><font><s:property value="#request.good.goodsPrice"/></font></div>
		                <div class="listText_btm"><a href="#"><font><s:property value="#request.good.goodsName"/></font></a></div>
		            </div>
		        </div>
		     </s:iterator>
		    </div>
		</div>
	</div>
	
	<div style="margin:10px auto;">
		<div id="kkpager"></div>
	</div>
	<script type="text/javascript">
	function getUrl() {
		var tarray = new Array("price", "local", "texture", "textureId", "theme", "themeId",  "technique",  "techniqueId", "shape", "shapeId", "style", "styleId", "font", "fontId", "gcgId");
		var url = "?rtype=" + $("#form input[name='rtype']").val();
		for(var i = 0; i<tarray.length; i++) {
			url += "&" + tarray[i] + "=" + $("input[name='"+tarray[i]+"']").val();
		}
		return url;
	}
	$(function(){
		var totalPage = $("input[name='totalPage']").val();
		var totalRecords = $("input[name='totalRecords']").val();
		var pageNo = $("input[name='pageNo']").val();
		if(!pageNo){
			pageNo = 1;
		}
		var url = getUrl();
		
		kkpager.generPageHtml({
			pno : pageNo,
			total : totalPage,
			totalRecords : totalRecords,
			hrefFormer : 'goods/goodsFilter',
			isShowTotalPage: false,
			isShowCurrPage: false,
			isShowTotalRecords: false,
			isGoPage: false,
			getLink : function(n){
				return this.hrefFormer + url + "&pageNo=" +n;
			}
		});
	});
	</script>
	
	<!-- 隐藏表单 -->
	<div class="hid_area">
	<form id="form" action="goods/goodsFilter" method="get">
		<!-- 类型 -->
		<input type="hidden" name="rtype" value="${rtype}" /> 
			<!-- 题材 -->
			<input type="hidden" name="themeId" value="${themeId}"/>
			<input type="hidden" name="theme" value="${theme}" />
			<!-- 材质 -->
			<input type="hidden" name="textureId" value="${textureId}" />
			<input type="hidden" name="texture" value="${texture}" />
			<!-- 技法 -->
			<input type="hidden" name="techniqueId" value="${techniqueId}" />
			<input type="hidden" name="technique" value="${technique}" />
			<!-- 形制 -->
			<input type="hidden" name="shapeId" value="${shapeId}" />	
			<input type="hidden" name="shape" value="${shape}" />	
			<!-- 作品风格 -->
			<input type="hidden" name="styleId" value="${styleId}" />
			<input type="hidden" name="style" value="${style}" />
			<!-- 字体 -->
			<input type="hidden" name="fontId" value="${fontId}" />
			<input type="hidden" name="font" value="${font}" />
		<!-- 价格 -->
		<input type="hidden" name="price" value="${price}" />
		<!-- 所在地 -->
		<input type="hidden" name="local" value="${local}" />
		
		<input type="hidden" name="gcgId" value="${gcgId}"/>
	</form>
	<input type="hidden" name="pageNo" value="${pageNo}"/>
	<input type="hidden" name="totalPage" value="${totalPage}"/>
	<input type="hidden" name="totalRecords" value="${totalRecords}"/>
	</div>
	
</div>


<script type="text/javascript">
var dlNum  =$("#selectList").find("dl");
for (var i = 0; i < dlNum.length; i++) {
	$(".hasBeenSelected .clearList").append("<div class=\"selectedInfor selectedShow\" style=\"display:none\"><span></span><label></label><em></em></div>");
}

var refresh = "true";

var typeArray = new Array("rtype", "price", "local", "texture", "theme", "technique", "shape", "style", "font");
var attrArray = new Array("texture", "theme", "technique", "shape", "style", "font");
var pageArray = new Array("pageNo, totalPage", "totalRecords");

//设置页面加载时属性选中状态
for(var i = 0; i<typeArray.length; i++) {
	$("dl[attr="+typeArray[i]+"] a").each(function(){
		var attrval = $(this).attr("attrval");
		if(attrval == $("input[name="+typeArray[i]+"]").val()) {
			sss($(this));
		}
	});
}
for(var i = 0; i<attrArray.length; i++) {
	var id = $("dl[attr="+attrArray[i]+"]").attr("id");
	$("#form input[name="+attrArray[i]+"Id"+"]").val(id);
}

function sss(a) {
	var text =a.text();
	
	//获取点击a的attrval值
	var attrval = a.attr("attrval");
	//获取筛选类别
	var dlAttr = a.parents("dl").attr("attr");
	//设置表单数据
	$("input[name="+dlAttr+"]").val(attrval);
	
	var selectedShow = $(".selectedShow");
	var textTypeIndex =a.parents("dl").index();
	var textType =a.parent("dd").siblings("dt").text();
	
	index = textTypeIndex -(2);
	$(".clearDd").show();
	$(".selectedShow").eq(index).show();
	a.addClass("selected").siblings().removeClass("selected");
	selectedShow.eq(index).find("span").text(textType);
	selectedShow.eq(index).find("label").text(text);
	var show = $(".selectedShow").length - $(".selectedShow:hidden").length;
	if (show > 1) {
		$(".eliminateCriteria").show();
	};
}

//清除value
function clearVal(array) {
	for (var i = 0; i<array.length; i++) {
		$("input[name="+array[i]+"]").val("");
	}
}

//设置类型属性点击事件
$(".typeList a ").live("click",function(){
	sss($(this));
	clearVal(attrArray);
	$("#form").submit();
});
//设置规格属性点击事件
$(".attrList a ").live("click",function(){
	sss($(this));
	$("#form").submit();
});

/* <!-- 单个条件删除 --> */
$(".selectedShow em").live("click",function(){
	$(this).parents(".selectedShow").hide();
	var textTypeIndex =$(this).parents(".selectedShow").index();
	index = textTypeIndex;
	$(".listIndex").eq(index).find("a").removeClass("selected");
	
	if($(".listIndex .selected").length < 2){
		$(".eliminateCriteria").hide();
	};
});

/* <!-- 清除筛选条件 --> */
$(".eliminateCriteria").live("click",function(){
	$(".selectedShow").hide();
	$(this).hide();
	$(".listIndex a ").removeClass("selected");
}); 
</script>
<div style="float:left">
<p><a href="http://www.mycodes.net/" target="_blank"></a></p>
</div>
</body>
</html>
